import React, { FC, useEffect, useState } from 'react'
import { Button, Card, Checkbox, Col, Drawer, Form, Row, Tag } from 'antd'
import { projectDetail } from '@/services/project'
import ProDescriptions from "@ant-design/pro-descriptions";
import { getAllDatabaseList, getDatabaseList } from '@/services/database'
import ProCard from '@ant-design/pro-card'

interface DetailInfoProps {
  onClose:any,
  visible:boolean,
  projectId:string,
}

const DetailInfo: FC<DetailInfoProps> = (props) => {

  const {onClose, visible, projectId } = props
  const [detail,setDetail] = useState<any>({});
  const [database, setDatabase] = useState<any>([])

  useEffect(() => {
    if (visible) {
      // 查询项目项目
      getAllDatabaseList().then((res:any) => {
        if (res.code == 10000) {
          setDatabase(res.data)
        }
      })

      projectDetail(projectId).then((res) => {
        if (res.code === 10000) {
          setDetail(res.data);
        }
      })
    }
  },[projectId,visible])

  return (
    <Drawer
      title="项目详情"
      width={800}
      onClose={() => onClose(false)}
      visible={visible}
      bodyStyle={{ paddingBottom: 80,backgroundColor:'#f0f2f5' }}
      footer={
        <div
          style={{
            textAlign: 'right',
          }}
        >
          <Button onClick={() => onClose(false)} type="primary">
            关闭
          </Button>
        </div>
      }>
      <ProCard>
        <ProDescriptions title='详情' column={2}>
          <ProDescriptions.Item key={1} label="项目名称">{detail.name || '-'}</ProDescriptions.Item>
          <ProDescriptions.Item key={2} label="项目介绍">{detail.description || '-'}</ProDescriptions.Item>
          <ProDescriptions.Item key={3} label="GroupId">{detail.group_id || '-'}</ProDescriptions.Item>
          <ProDescriptions.Item key={4} label="ArtifactId">{detail.artifact_id || '-'}</ProDescriptions.Item>
          <ProDescriptions.Item key={5} label="生成WebView">{(detail.gen_web == 'yes' ? '是' : '否') || '-'}</ProDescriptions.Item>
          <ProDescriptions.Item key={6} label="结构">{detail.package_type || '-'}</ProDescriptions.Item>
          <ProDescriptions.Item key={7} label="项目类型">{(detail.pro_type == 'micro' ? '微服务' : '单应用') || '-'}</ProDescriptions.Item>
          <ProDescriptions.Item key={8} label="项目版本">{detail.version || '-'}</ProDescriptions.Item>
          <ProDescriptions.Item key={9} label="访问路径">{detail.context_path || '-'}</ProDescriptions.Item>
          <ProDescriptions.Item key={10} label="生成路径">{detail.local_path || '-'}</ProDescriptions.Item>
        </ProDescriptions>
      </ProCard>
      <ProCard title='数据库关联' style={{marginTop:30}}>
        <ProDescriptions column={5}>
          {database.map((tag:any,index:number) => (
            <ProDescriptions.Item key={index}>
            <Tag
              key={tag.id}
              color={(detail.dbIds && detail.dbIds.indexOf(tag.id) > -1) ?'#108ee9' : '#ddd'}
            >
              {tag.db_name}
            </Tag>
            </ProDescriptions.Item>
          ))}
        </ProDescriptions>
      </ProCard>
    </Drawer>
  )
}

export default DetailInfo;
